@font-face {
    font-family: "iconfont";
    /* Project id 3681648 */
    src: url('//at.alicdn.com/t/c/font_3681648_esliq4ub2c8.woff2?t=1664470016074') format('woff2'),
        url('//at.alicdn.com/t/c/font_3681648_esliq4ub2c8.woff?t=1664470016074') format('woff'),
        url('//at.alicdn.com/t/c/font_3681648_esliq4ub2c8.ttf?t=1664470016074') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-shouye:before {
    content: "\e65b";
}

.icon-fenlei:before {
    content: "\e669";
}

.icon-wo:before {
    content: "\e67d";
}

.tab-bar {
    box-sizing: border-box;
    z-index: 99;
    width: 100vw;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba( 255, 255, 255, 0.6 );
    box-shadow: 0 8px 24px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 40rpx );
    -webkit-backdrop-filter: blur( 40rpx );

    .container {
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;

        .item {
            width: 100rpx;
            height: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 24rpx;
            position: relative;
            &.active {
                color: #7267c7;
                .iconfont {
                    transform:translateY(-20rpx);
                }
                .text {
                    opacity: 1;
                    transform: translateY(30px);
                }
            }
            
            .iconfont {
                font-size: 50rpx;
                line-height: 100rpx;
                transition: all 0.3s;
            }
            .text {
                transition: all 0.3s;
                position: absolute;
                font-size: 22rpx;
                opacity: 0;
                transform: translateY(40px);
            }
        }
    }
}